<template>
  <div class="main-header-index">
    <div class="main-header">
      <el-row :gutter="0">
        <el-col :span="13">
          <span>
            共计企业：<span class="font-style">{{ companyList.length }}</span> 家
          </span>
          <enterprise-choice @EnterpriseChoiceItem="choiceItem($event)" :companyList="companyList" :is-show-enterprise="isShowEnterprise" :is-show-county="isShowCounty"></enterprise-choice>
        </el-col>

        <el-col :span="4" :class="{'btn-style': true, 'active': item.id === activeId}" v-for="(item, index) in titleList" :key="index" @click.native="change(item.id)" >
          <span>{{item.title}}</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import EnterpriseChoice from '@/components/EnterpriseChoice'

export default {
  props: {
    total: {
      type: Number,
      default: 0
    },
    activeId: {
      type: String,
      default: '1'
    },
    companyList:{
      type: Array,
      default: () => []
    },
    isShowEnterprise: {
      type: Boolean,
      default: true
    },
    isShowCounty: {
      type: Boolean,
      default: false
    }
  },
  components:{
    EnterpriseChoice
  },
  data() {
    return {
      active: false,
      titleList: [
        {id: '1', title: '产业发展'},
        {id: '2', title: '牧业展示'},
        {id: '3', title: '产业展示'},
      ],
    }
  },

  methods: {
    change(id) {
      if ( id === '1'){
        this.$router.push({
          name:'develop'
        })
      }
      else if ( id === '2'){
        this.$router.push({
          name:'animalHusbandry'
        })
      }
      else if ( id === '3'){
        this.$router.push({
          name:'industry'
        })
      }
    },
    choiceItem(item) {
      this.$emit('EnterpriseChoiceItem', item)
    }
  }
}
</script>
<style scoped lang="scss">
.main-header-index {
  width: 98%;
  height: 100%;
  display: flex;
  align-items: center;
  color: #DBDBDB;
  font-size: 0.2rem;
  font-family: Source Han Sans CN,serif;
  font-weight: 500;
  margin: 0 0.1rem 0 0.1rem;

  .main-header {
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    display: flex;
    align-items: center;

    .el-row {
      width: 100%;
      display: flex;
      justify-content: flex-end;

      .font-style {
        color: #39FFC0;
        font-size: 0.3rem;
        font-weight: bold;
      }

      .btn-style, .active{
        font-weight: 500;
        font-size: 12px;
        font-family: Source Han Sans CN;
        background-image: url('../../assets/images/unchecked-img.png');
        background-size: 100% 100%;
        margin-right: 0.15rem;
        height: 0.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .active{
        background-image: url('../../assets/images/checked-img.png');
      }
    }
  }
}
</style>
